<template>
	<!-- #ifndef APP-NVUE -->
	<view :id="componentId + 'box'" class="QS-Sticky" :class="getClass" :style="getStyle">
		<view :id="componentId">
			<view id="content" :style="getFixedStyle">
				<slot></slot>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<view class="QS-Sticky" ref="QS-Sticky" :style="{ top: top }">
		<slot></slot>
	</view>
	<!-- #endif -->
</template>

<script>
	// #ifndef APP-NVUE
	import intersectionObserver from '../../js/functions/intersectionObserver.js';
	import obsDisconnect from '../../js/functions/obsDisconnect.js';
	import styleObj2String from '../../js/functions/styleObj2String.js'
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import rpxUnit2px from '../../js/functions/rpxUnit2px.js';
	const QSComponentMixinRes = QSComponentMixin({
		componentType: 'QS-Sticky',
		nodeName: '.QS-Sticky'
	});
	var id = 0;
	export default {
		mixins: [QSComponentMixinRes.mixin],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			top: {
				type: [Number, String],
				default: 0
			},
			zIndex: {
				type: [Number, String],
				default: 1
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fixed: false,
				contentHeight: 0,
				contentWidth: 0,
				left: 0,
				inited: false
			}
		},
		computed: {
			getFixedStyle() {
				if (this.fixed && !this.disabled) return styleObj2String({
					position: 'fixed',
					top: this.top,
					// #ifdef H5
					left: this.left,
					// #endif
					zIndex: this.zIndex,
					height: this.contentHeight + 'px',
					width: this.contentWidth + 'px'
				});
				return {};
			},
			getTop() {
				return rpxUnit2px(this.top);
			},
			QS_nCompStyle() {
				return {
					height: this.contentHeight ? (this.contentHeight + 'px') : 'auto',
					width: this.contentWidth ? (this.contentWidth + 'px') : 'auto'
				}
			}
		},
		watch: {
			top(top) {
				this.init();
			}
		},
		mounted() {
			this.init();
			// #ifdef H5
			this.getQuery()
			// #endif
		},
		beforeDestroy() {
			obsDisconnect(this.obsObj);
		},
		methods: {
			init() {
				obsDisconnect(this.obsObj);
				this.obsObj = intersectionObserver({
					vm: this,
					offsetTop: this.getTop,
					viewportHeight: uni.$qs.getSys().windowHeight - this.getTop,
					options: {
						thresholds: [.01, .95, .98, 1]
					},
					// #ifdef MP-BAIDU
					nodes: [`.QS-Sticky`, `#content`],
					// #endif
					// #ifndef MP-BAIDU
						// #ifdef MP
						nodes: [`#${this.componentId + 'box'}`, `#content`],
						// #endif
						// #ifndef MP
						nodes: [`#${this.componentId}`, `#content`],
						// #endif
					// #endif
					// intersection,
					// unIntersection,
					intersectionComplate: (res, i)=>{
						// #ifndef H5
						this.contentHeight = res.boundingClientRect.height;
						this.contentWidth = res.boundingClientRect.width;
						// #endif
						if (i == 1 && res.boundingClientRect.top < this.getTop) this.setFixed(true);
						else if (i == 0 && res.boundingClientRect.top >= this.getTop) this.setFixed(false);
					}
				}
				);
			},
			setFixed(bl) {
				if(typeof bl == 'boolean') this.fixed = bl;
			},
			compMixin_emitQuery(data) {
				this.contentHeight = data.height;
				this.contentWidth = data.width;
				this.left = data.left;
			}
		}
	}
	// #endif
	// #ifdef APP-NVUE
	export default {
		props: {
			top: {
				type: [Number, String],
				default: 0
			},
		}
	}
	// #endif
</script>

<style scoped lang="scss">
	.QS-Sticky {
		/* #ifdef APP-NVUE */
		position: sticky;
		/* #endif */
	}
</style>
